import React, { Component } from "react";
import {
    StyleSheet,
    Text,
    View,
    TextInput,
    ScrollView,
    Image,
    Animated,
    DeviceEventEmitter,
    Platform,
    NativeAppEventEmitter,
    TouchableOpacity,
    Modal,
    Button,
    NetInfo,
    Linking,
    NativeModules,
    BackHandler,
    ProgressBarAndroid,
    AppState,
    KeyboardAvoidingView
} from "react-native";
import styles from "./indexStyle";
import api from "../../services/api";
import Touch from "../global/Touch";
import RNFS from "react-native-fs";
import ToastTip from '../global/ToastTip';

class cancelOrderReasonDialog extends Component{
    constructor(props) {
        super(props);

        this.state = {
            reason:'',
            count:0,
        };
    }

    componentWillReceiveProps(nextProps) {

    }

    componentDidMount() {
        
    }

    _hide(){
        this.setState({
            reason:'',
            count:0,
        })
    }
    _onCancel(){
        let {onCancel} = this.props;
        this._hide();
        onCancel();
    }
    _onConfirm(){
        let {onConfirm} = this.props;
        onConfirm(this.state.reason)
    }

    

    render() {
        let { showModal, onCancel,onConfirm} = this.props;


        return (
            <Modal

                animationType={"fade"}
                transparent={true}
                visible={showModal}
                onRequestClose={() => {

                }}
            >
                <View
                    style={{
                        backgroundColor: "#0005",
                        flex: 1,
                        justifyContent: "center",
                        alignItems: "center",
                        marginTop:-50
                    }}
                >

                <View
                    style={{
                        backgroundColor:'white',
                        height:250,
                        flexDirection:'column',
                        width:280,
                        position:'absolute',
                        top:200
                    }}

                >
                    <View
                        style={{
                            flexDirection:'row',
                            justifyContent:'center',
                            height:45,
                            borderBottomWidth:StyleSheet.hairlineWidth,
                            borderColor:'#DDDDDD',

                        }}
                    >

                        <View style={{flex:1,flexDirection:'row'}}>
                        </View>
                        <View style={{flex:1,flexDirection:'row',justifyContent:'center'}}>
                            <Text
                                style={{
                                    fontSize:15,
                                    color:'#565656',
                                    marginTop: 12,

                                }}
                            >取消原因</Text>
                        </View>
                        <View style={{flex:1,flexDirection:'column'}}>
                            <TouchableOpacity
                            activeOpacity={0.8}
                            style={{
                                padding:15,
                                alignItems:'flex-end'

                            }}
                            onPress={this._onCancel.bind(this)}
                        >
                            <Image
                                source={require("../../../img/dialog_close.png")}
                                style={{
                                    width: 15,
                                    height: 15,
                                }}
                            />
                        </TouchableOpacity>
                        </View>
                        
                    </View>
                    <View
                        style={{
                            flex:1,
                            flexDirection:'column',
                            borderColor:'#DDDDDD',
                            borderWidth:StyleSheet.hairlineWidth,
                            borderRadius: 2,
                            margin: 15,
                        }}
                    >
                        <TextInput
                            style={{
                                flex:1,
                                color:'#565656',
                                fontSize:15,
                                textAlignVertical: 'top', 
                            }}
                            underlineColorAndroid={'#ffffff'}
                            placeholder={'取消前请先和用户确认，并输入订单取消原因。'}
                            placeholderTextColor={'#B5B5B5'}
                            multiline={true}
                            value={this.state.reason}
                            onChangeText={(text)=>{
                                let r = text.replace(/ /g, '').substring(0,30);
                                this.setState({reason: r, count:r.length});
                            }}
                        ></TextInput>
                        <Text style={{
                            color:'#B5B5B5',
                            fontSize:12,
                            alignSelf:  'flex-end' ,
                            marginRight: 5,
                            marginBottom:5,
                        }}
                            
                        >{this.state.count?this.state.count:'0'}/30</Text>
                    </View>
                    <View
                        style={{
                            flexDirection:'row',
                            height:44,
                            borderTopWidth:StyleSheet.hairlineWidth,
                            borderColor:'#DDDDDD',
                        }}
                    >
                        <TouchableOpacity style={{
                            flex:1,
                            justifyContent:'center',
                            alignItems:'center',
                            borderRightWidth: StyleSheet.hairlineWidth,
                            borderColor:'#DDDDDD',
                        }}
                            onPress={this._onCancel.bind(this)}
                        >
                            <Text style={{
                                color:'#565656',
                                fontSize:15,
                            }}>关闭</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={{
                            flex:1,
                            justifyContent:'center',
                            alignItems:'center',
                        }}
                            onPress={this._onConfirm.bind(this)}
                        >
                            <Text style={{
                                color:'#EA5404',
                                fontSize:15,
                            }}>确定取消</Text>
                        </TouchableOpacity>
                    </View>
                    
                </View>
                    
                    
                </View>
                
            </Modal>
        );
    }
}


export default cancelOrderReasonDialog;
